<!DOCTYPE html>
<html lang="en" xmlns:v-bind="http://www.w3.org/1999/xhtml" xmlns:v-on="http://www.w3.org/1999/xhtml">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="vue.js"></script>
</head>
<body>

<div id="app">
    <input type="checkbox" id="checkbox" v-model="checked">
    <label for="checkbox">{{checked}}</label>

    <input type="checkbox" id="checkbox2" v-model="checked2" true-value="yes" false-value="no">
    <label for="checkbox2">{{checked2}}</label>

    <hr>


    <input type="checkbox" id="jack" value="jack" v-model="name"><label for="jack">jack</label>

    <input type="checkbox" id="bob" value="bob" v-model="name"><label for="bob">bob</label>

    <br>
    <sapn>names:{{name}}</sapn>


    <hr>

    <input type="radio" id="one" value="one" v-model="picked"><label for="one">ONE</label>
    <input type="radio" id="two" value="two" v-model="picked"><label for="two">TWO</label>
    <br>
    <span>picked: {{picked}}</span>

    <hr>

    <select v-model="selected">
        <option value="" disabled>请选择</option>
        <option value="A">A</option>
        <option value="B">B</option>
        <option value="C">C</option>
    </select>
    <br>
    <span>selected: {{selected}}</span>

    <hr>

    <select v-model="selected2">
        <option value="" disabled>请选择</option>
        <option v-for="option in options" :value="option.value">{{option.text}}</option>
    </select>
    <br>
    <span>selected2: {{selected2}}</span>

    <hr>

    <select v-model="selected3">
        <option value="" disabled>请选择</option>
        <option value="{msg: 'hello', code: 123}">MSG1</option>
        <option value="{msg: 'vue', code: 456}">MSG2</option>
    </select>
    <br>
    <span>selected3: {{selected3}}</span>

    <hr>

    <input type="number" v-model.number="inputNumber">
    <input type="number" v-model="inputNumber2">
    <br>
    <span>inputNumber: {{inputNumber}}</span><!--类型是数值-->
    <br>
    <span>inputNumber2: {{inputNumber2}}</span><!--字符串-->


    <!--实现原理-->
    <input v-model="something">
    <!--等价于-->
    <input v-bind:value="something" v-on:input="something = $event.target.value">
    <!--或者-->
    <input v-bind:value="something" v-on:input="something = arguments[0]">



</div>





<script>
    var app = new Vue({
        el: "#app",
        data: {
            checked: true,
            checked2: 'no',
            name: [],
            picked: "",
            selected: "",
            options: [
                {value: 1, text: "一"},
                {value: 2, text: "二"},
                {value: 3, text: "三"}
                ],
            selected2: "",
            selected3: "",
            inputNumber: null,
            inputNumber2: null
        }
    })

</script>

</body>
</html>